import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import Header from '../components/index/Header';
import Slider from '../components/index/Slider';
import styles from './IndexPage.css';

import TotalModal from '../components/index/totalModal';
import TypeModal from '../components/index/typeModal';
import WarningModal from '../components/index/warningModal';
import UsedModal from '../components/index/usedModal';
import DistributionModal from '../components/index/distributionModal';
import { Icon, Input, Button, Row, Col } from 'antd';


function IndexPage({ common,index, children, location, dispatch }) {

  const { pathname } = location;
  const logout = () => {
    dispatch({
        type: 'common/logout',
    });
  }
  //头部统计
  let totalModalProps={
    assetCount: index.assetCount,
    rackCount: index.rackCount,
    roomCount: index.roomCount,
    uCount: index.uCount,
  }

  let warningModalProps={
    scrapCount: index.scrapCount,
    presetCount: index.presetCount,
    alarmCount: index.alarmCount,
  }

  //机房设备分布
  let distributionProps={
    roomData: index.roomData,
  }

   //机房设备分布
  let typeProps={
    assetCountByRoom: index.assetCountByRoom,
    dispatch: dispatch,
    total:index.total,
    updata:index.updata,
    roomList: index.roomList,
  }

  //机房U位已使用情况
  let usedProps={
    uData: index.uData,
  }

  return (
    <div className={styles.warp}>
      <div className={styles.top}>
        <div className={styles.topleft}>
           <div style={{lineHeight: '50px',textAlign:'center',fontSize:'1.3em',color :'#fff' }}>资产管理系统</div>
        </div>
        <div className={styles.topright}>
           <Header onLogout={logout} realName={localStorage.getItem("realName")} dispatch={dispatch} />
        </div>
      </div>
      <div className={styles.contwarp}>
        <div className={styles.contleft}>
          <Slider />
        </div>
        {pathname == '/virtual'?
        <div className={styles.contrightNoPadding}>
          {children}
        </div>:
        <div className={styles.contrightwarp}>
          <div className={styles.contright}>
             {pathname == '/'?<div className={styles.warpbox}>
                    <div className={styles.warp} style={{height: '887px'}}>
                        <TotalModal {...totalModalProps}/>
                        <div className={styles.mid}>
                          <TypeModal {...typeProps}/>
                          <WarningModal {...warningModalProps}/>
                        </div>
                        <div className={styles.fot}>
                          <UsedModal {...usedProps}/>
                          <DistributionModal {...distributionProps}/>
                        </div>
                    </div>
                </div>:<div>{children}</div>}
          </div>
        </div>
        }
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  return { common : state.common,index:state.index,loading:state.loading.models.common};
}

export default connect(mapStateToProps)(IndexPage);
